<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备管理系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/notification.css">
</head>
<body>
    <div class="wrapper">
        <!-- 侧边导航栏 -->
        <nav class="sidebar">
            <div class="sidebar-header">
                <h3>设备管理系统</h3>
            </div>
            <ul class="nav-items">
                <li class="nav-item active" data-target="dashboard">
                    <a href="#"><i class="icon-dashboard"></i>控制面板</a>
                </li>
                <li class="nav-item" data-target="upgrade">
                    <a href="#"><i class="icon-upgrade"></i>设备升级</a>
                </li>
                <li class="nav-item" data-target="rtsp">
                    <a href="#"><i class="icon-video"></i>视频预览</a>
                </li>
                <li class="nav-item" data-target="logs">
                    <a href="#"><i class="icon-logs"></i>日志管理</a>
                </li>
                <li class="nav-item" data-target="settings">
                    <a href="#"><i class="icon-settings"></i>设备配置</a>
                </li>
            </ul>
            <div class="sidebar-footer">
                <button id="restartDevice" class="btn btn-warning">设备重启</button>
                <button id="logout" class="btn btn-danger">退出登录</button>
            </div>
        </nav>

        <!-- 主内容区 -->
        <main class="content">
            <!-- 控制面板 -->
            <section id="dashboard" class="content-section active">
                <h1>设备状态概览</h1>
                <div class="dashboard-cards">
                    <div class="card">
                        <h3>设备信息</h3>
                        <div class="device-info">
                            <p><strong>设备名称:</strong> <span id="deviceName">--</span></p>
                            <p><strong>设备型号:</strong> <span id="deviceModel">--</span></p>
                            <p><strong>序列号:</strong> <span id="serialNumber">--</span></p>
                        </div>
                    </div>
                    <div class="card">
                        <h3>版本信息</h3>
                        <div class="version-info">
                            <p><strong>ARM 版本:</strong> <span id="armVersion">--</span></p>
                            <p><strong>MCU 版本:</strong> <span id="mcuVersion">--</span></p>
                            <p><strong>上次更新:</strong> <span id="lastUpdate">--</span></p>
                        </div>
                    </div>
                    <div class="card">
                        <h3>系统状态</h3>
                        <div class="system-status">
                            <p><strong>CPU 使用率:</strong> <span id="cpuUsage">--</span></p>
                            <p><strong>内存使用:</strong> <span id="memoryUsage">--</span></p>
                            <p><strong>存储空间:</strong> <span id="storageSpace">--</span></p>
                            <p><strong>运行时间:</strong> <span id="uptime">--</span></p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 设备升级 -->
            <section id="upgrade" class="content-section">
                <h1>设备升级管理</h1>
                <div class="upgrade-container">
                    <div class="upgrade-card arm">
                        <h2>ARM 固件升级</h2>
                        <div class="version-info">
                            <p><strong>当前版本:</strong> <span id="armCurrentVersion">--</span></p>
                            <p><strong>最新版本:</strong> <span id="armLatestVersion">--</span></p>
                        </div>
                        <div class="upgrade-action">
                            <button id="checkArmUpdate" class="btn">检查更新</button>
                            <button id="upgradeArm" class="btn btn-primary" disabled>开始升级</button>
                        </div>
                        <div class="upload-firmware">
                            <h3>上传固件</h3>
                            <input type="file" id="armFirmwareFile" accept=".bin,.fw">
                            <button id="uploadArmFirmware" class="btn">上传并升级</button>
                        </div>
                    </div>
                    
                    <div class="upgrade-card mcu">
                        <h2>MCU 固件升级</h2>
                        <div class="version-info">
                            <p><strong>当前版本:</strong> <span id="mcuCurrentVersion">--</span></p>
                            <p><strong>最新版本:</strong> <span id="mcuLatestVersion">--</span></p>
                        </div>
                        <div class="upgrade-action">
                            <button id="checkMcuUpdate" class="btn">检查更新</button>
                            <button id="upgradeMcu" class="btn btn-primary" disabled>开始升级</button>
                        </div>
                        <div class="upload-firmware">
                            <h3>上传固件</h3>
                            <input type="file" id="mcuFirmwareFile" accept=".bin,.fw">
                            <button id="uploadMcuFirmware" class="btn">上传并升级</button>
                        </div>
                    </div>
                    
                    <div class="upgrade-progress hidden">
                        <h3>升级进度</h3>
                        <div class="progress-container">
                            <div class="progress-bar">
                                <div class="progress-fill" id="upgradeProgressBar"></div>
                            </div>
                            <span id="upgradeProgressText">0%</span>
                        </div>
                        <div class="upgrade-status">
                            <p id="upgradeStatusText">准备升级...</p>
                        </div>
                    </div>
                    
                    <div class="update-history">
                        <h2>更新历史</h2>
                        <div class="update-logs" id="updateLogs">
                            <!-- 更新日志内容将通过 JavaScript 动态添加 -->
                        </div>
                    </div>
                </div>
            </section>

            <!-- RTSP 视频预览 -->
            <section id="rtsp" class="content-section">
                <h1>RTSP 视频预览</h1>
                <div class="rtsp-container">
                    <div class="rtsp-player">
                        <div id="rtspPlayer"></div>
                    </div>
                    <div class="rtsp-controls">
                        <div class="rtsp-url-input">
                            <input type="text" id="rtspUrl" placeholder="RTSP URL" value="rtsp://localhost:8554/stream">
                            <button id="connectRtsp" class="btn btn-primary">连接</button>
                            <button id="disconnectRtsp" class="btn">断开</button>
                        </div>
                        <div class="rtsp-buttons">
                            <button id="fullscreenBtn" class="btn">全屏</button>
                            <button id="snapshotBtn" class="btn">截图</button>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 日志管理 -->
            <section id="logs" class="content-section">
                <h1>日志管理</h1>
                <div class="logs-container">
                    <div class="logs-filter">
                        <div class="form-group">
                            <label for="logType">日志类型</label>
                            <select id="logType">
                                <option value="all">全部日志</option>
                                <option value="system">系统日志</option>
                                <option value="upgrade">升级日志</option>
                                <option value="error">错误日志</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>开始日期</label>
                            <input type="date" id="logStartDate">
                        </div>
                        <div class="form-group">
                            <label>结束日期</label>
                            <input type="date" id="logEndDate">
                        </div>
                        <div class="buttons-group">
                            <button id="searchLogs" class="btn">查询</button>
                            <button id="exportLogs" class="btn btn-primary">导出日志</button>
                        </div>
                    </div>
                    <div class="logs-table-container">
                        <table class="logs-table">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>类型</th>
                                    <th>级别</th>
                                    <th>内容</th>
                                </tr>
                            </thead>
                            <tbody id="logsTableBody">
                                <!-- 日志内容将通过 JavaScript 动态添加 -->
                            </tbody>
                        </table>
                    </div>
                    <div class="logs-pagination">
                        <button id="prevPage" class="btn">上一页</button>
                        <span id="pageInfo">第 <span id="currentPage">1</span>/<span id="totalPages">1</span> 页</span>
                        <button id="nextPage" class="btn">下一页</button>
                    </div>
                </div>
            </section>

            <!-- 设备配置 -->
            <section id="settings" class="content-section">
                <h1>设备配置</h1>
                <div class="settings-container">
                    <div class="settings-card">
                        <h2>网络设置</h2>
                        <form id="networkSettingsForm">
                            <div class="form-group">
                                <label for="networkMode">网络模式</label>
                                <select id="networkMode" name="networkMode">
                                    <option value="dhcp">DHCP</option>
                                    <option value="static">静态 IP</option>
                                </select>
                            </div>
                            <div class="static-ip-settings">
                                <div class="form-group">
                                    <label for="ipAddress">IP 地址</label>
                                    <input type="text" id="ipAddress" name="ipAddress">
                                </div>
                                <div class="form-group">
                                    <label for="subnetMask">子网掩码</label>
                                    <input type="text" id="subnetMask" name="subnetMask">
                                </div>
                                <div class="form-group">
                                    <label for="gateway">网关</label>
                                    <input type="text" id="gateway" name="gateway">
                                </div>
                                <div class="form-group">
                                    <label for="dns">DNS 服务器</label>
                                    <input type="text" id="dns" name="dns">
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">保存网络设置</button>
                        </form>
                    </div>
                    
                    <div class="settings-card">
                        <h2>RTSP 设置</h2>
                        <form id="rtspSettingsForm">
                            <div class="form-group">
                                <label for="rtspPort">RTSP 端口</label>
                                <input type="number" id="rtspPort" name="rtspPort" min="1024" max="65535">
                            </div>
                            <div class="form-group">
                                <label for="videoResolution">视频分辨率</label>
                                <select id="videoResolution" name="videoResolution">
                                    <option value="1920x1080">1920x1080</option>
                                    <option value="1280x720">1280x720</option>
                                    <option value="640x480">640x480</option>
                                    <option value="320x240">320x240</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="videoBitrate">视频比特率 (Kbps)</label>
                                <input type="number" id="videoBitrate" name="videoBitrate">
                            </div>
                            <div class="form-group">
                                <label for="videoFramerate">视频帧率</label>
                                <input type="number" id="videoFramerate" name="videoFramerate" min="1" max="60">
                            </div>
                            <button type="submit" class="btn btn-primary">保存 RTSP 设置</button>
                        </form>
                    </div>
                    
                    <div class="settings-card">
                        <h2>系统设置</h2>
                        <form id="systemSettingsForm">
                            <div class="form-group">
                                <label for="deviceName">设备名称</label>
                                <input type="text" id="deviceNameSetting" name="deviceName">
                            </div>
                            <div class="form-group">
                                <label for="ntpServer">NTP 服务器</label>
                                <input type="text" id="ntpServer" name="ntpServer">
                            </div>
                            <div class="form-group">
                                <label for="timeZone">时区</label>
                                <select id="timeZone" name="timeZone">
                                    <option value="GMT+8">GMT+8 (北京时间)</option>
                                    <option value="GMT">GMT (格林威治时间)</option>
                                    <option value="GMT-5">GMT-5 (东部时间)</option>
                                    <option value="GMT-8">GMT-8 (太平洋时间)</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="autoUpdate">自动检查更新</label>
                                <input type="checkbox" id="autoUpdate" name="autoUpdate">
                            </div>
                            <button type="submit" class="btn btn-primary">保存系统设置</button>
                        </form>
                    </div>
                    
                    <div class="settings-card">
                        <h2>用户管理</h2>
                        <form id="userSettingsForm">
                            <div class="form-group">
                                <label for="currentPassword">当前密码</label>
                                <input type="password" id="currentPassword" name="currentPassword" required>
                            </div>
                            <div class="form-group">
                                <label for="newPassword">新密码</label>
                                <input type="password" id="newPassword" name="newPassword">
                            </div>
                            <div class="form-group">
                                <label for="confirmPassword">确认新密码</label>
                                <input type="password" id="confirmPassword" name="confirmPassword">
                            </div>
                            <button type="submit" class="btn btn-primary">修改密码</button>
                        </form>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <!-- 提示模态框 -->
    <div id="modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2 id="modalTitle">提示</h2>
            <p id="modalMessage"></p>
            <div class="modal-buttons">
                <button id="modalCancel" class="btn">取消</button>
                <button id="modalConfirm" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>

    <!-- 加载 JavaScript 文件 -->
    <script src="js/jquery.min.js"></script>
    <script src="js/rtsp-player.js"></script>
    <script src="js/main.js"></script>
</body>
</html>
